<template>
  <view class="container">
    <!-- 页面顶部标题 -->
    <view class="header">
      <text class="title">抢购</text>
      <button @click="refreshPage" class="refresh-btn">刷新</button>
    </view>

    <!-- 动态活动列表 -->
    <view class="activity-list">
      <view
        v-for="(activity, index) in activityList"
        :key="index"
        class="activity-item"
        @click="onActivityClick(activity)"
      >
        <!-- 活动图片 -->
        <image :src="activity.image" class="activity-image" />
        
        <!-- 活动详情 -->
        <view class="activity-info">
          <text class="activity-title">{{ activity.title }}</text>
          <text class="activity-time">开放时间：{{ activity.startTime }} - {{ activity.endTime }}</text>
          <button
            :class="activity.isActive ? 'active-btn' : 'inactive-btn'"
            :disabled="!activity.isActive"
          >
            {{ activity.isActive ? '进入活动' : '未开馆' }}
          </button>
        </view>

        <!-- 活动结束水印 -->
        <view v-if="!activity.isActive" class="activity-ended-watermark">
          活动已结束
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityList: [], // 活动数据列表
    };
  },
  created() {
    this.loadActivityData();
  },
  methods: {
    // 加载活动数据（模拟从后端获取）
    loadActivityData() {
      const currentTime = new Date(); // 当前时间
      this.activityList = [
        {
          id: 1,
          title: '亚昭商城',
          image: '/static/activity1.jpg',
          startTime: '11:20:00',
          endTime: '11:50:00',
          isActive: false, // 是否活动中
        },
        {
          id: 2,
          title: '玉质通透精品展',
          image: '/static/activity2.jpg',
          startTime: '12:00:00',
          endTime: '12:30:00',
          isActive: true, // 是否活动中
        },
      ];

      // 检查活动状态
      this.activityList = this.activityList.map((activity) => {
        const startTime = this.parseTime(activity.startTime);
        const endTime = this.parseTime(activity.endTime);
        activity.isActive = currentTime >= startTime && currentTime <= endTime;
        return activity;
      });
    },

    // 解析时间
    parseTime(timeStr) {
      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
      const time = new Date();
      time.setHours(hours, minutes, seconds, 0);
      return time;
    },

    // 刷新页面
    refreshPage() {
      this.loadActivityData();
      uni.showToast({ title: '活动列表已刷新', icon: 'none' });
    },

    // 点击活动
    onActivityClick(activity) {
      if (activity.isActive) {
        uni.navigateTo({
          url: `/pages/grab-details/grab-details?id=${activity.id}`,
        });
      } else {
        uni.showToast({ title: '活动已结束', icon: 'none' });
      }
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #3cb371;
  color: white;
}
.title {
  font-size: 36rpx;
}
.refresh-btn {
  background-color: white;
  color: #3cb371;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 20rpx;
}
.activity-item {
  position: relative;
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}
.activity-image {
  width: 100%;
  height: 200rpx;
}
.activity-info {
  padding: 10rpx;
}
.activity-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}
.activity-time {
  font-size: 24rpx;
  color: #666;
}
.active-btn {
  background-color: #3cb371;
  color: white;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.inactive-btn {
  background-color: #ccc;
  color: white;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.activity-ended-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 36rpx;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-20deg);
}
</style>
